<template>
    <div class="muti-path-input">
        <n-input style="width:100%;" type="textarea" v-model:value="value" :placeholder="'please input ' + field.Label + 'multiple paths division by \';\''" @update:value="modelValue = value.split(';')" />
        <div class="btns">
            <n-button class="opbtn" strong secondary circle type="primary" size="medium" @click="openDir">
                <template #icon>
                    <n-icon><AddCircleSharp /></n-icon>
                </template>
            </n-button>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref,onMounted } from 'vue';
import { NInput,NButton, NIcon } from 'naive-ui';
import { GetDir } from '../../../wailsjs/go/main/App';
import { device,frontend } from '../../../wailsjs/go/models';
import { AddCircleSharp } from '@vicons/ionicons5'


const modelValue = defineModel<string[]>({
    default: []
})

async function openDir() {
    let opt = new frontend.OpenDialogOptions(`{"Title":"Open Dir ${props.field.Label}"}`)
    if (value.value.length > 0) {
        value.value += ';'
    }
    value.value += await GetDir(opt)
    modelValue.value = value.value.split(';')
}

const props = defineProps({
    field: {
        type: device.DevFrontendConfig,
        default: {}
    }
})

const value = ref<string>("")

onMounted(() => {
    value.value = modelValue.value.join(';')
})


</script>
<style lang="scss" scoped>
.muti-path-input {
    width: 100%;
    display: flex;
    flex-flow: column;
    align-items: flex-end;
}
.opbtn {
    background-color: rgba($color: #000000, $alpha: 0);
    line-height: 1.5rem;
    vertical-align: middle;
    .n-icon{
        width: 1.5rem;
        height: 1.5rem;
    }
    svg {
        width: 1.5rem;
        height: 1.5rem;
    }
}
</style>